import * as React from "react";
import * as ReactDOM from "react-dom";

import Square from ".";

class Test extends React.Component {
  state = {
    visible: false,
    src: "",
  };
  componentDidMount() {
    const style = document.createElement("style");
    // style.innerHTML = "*{animation:none !important}";
    document.head.appendChild(style);
    fetch(
      "//test-image.media.lianjia.com/element-library/test-c9bef667-4aaa-415d-b5dd-c459293aae1d.png"
    )
      .then((res) => res.blob())
      .then((blob) => {
        this.setState({
          src: URL.createObjectURL(blob),
          visible: true,
        });
      });
  }

  render() {
    const { visible, src } = this.state;

    return (
      <>
        <Square
          useDom
          visible={visible}
          source={src}
          // testRender={
          //   <div
          //     style={{
          //       display: "inline-block",
          //       height: 30,
          //       width: 120,
          //       opacity:0.5,
          //       background: "#eee",
          //     }}
          //   >显示内容</div>
          // }
        />
      </>
    );
  }
}

var mountNode = document.createElement("div");
document.body.appendChild(mountNode);
ReactDOM.render(<Test />, mountNode);
